<!--
 * @Description: 设备管理
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:02:33
-->
<template>
  <div>

    <div class="title">设备管理</div>
      <el-row>
        <!-- 搜索 -->
        <el-col :span="22">
          <div class="search">
            <!-- {{form}} -->
            <el-form :inline="true" :model="form" class="demo-form-inline">
              <el-form-item>
                <el-select clearable v-model="form.online_status" placeholder="请选择设备状态">
                  <el-option label="在线" value="1"></el-option>
                  <el-option label="离线" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select clearable v-model="form.bind_status" placeholder="请选择设备绑定状态">
                  <el-option label="未绑定" value="0"></el-option>
                  <el-option label="已绑定" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input v-model="form.name" placeholder="请输入设备名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>

        <!-- 录入 -->
        <el-col :span="2" style="text-align: right; padding-top: 6px">
          <el-button type="primary" @click="toAdd">录入</el-button>
        </el-col>
      </el-row>
    

    <!-- 表格 -->
    <div class="table">
      <el-table :data="empData" style="width: 100%">
        <el-table-column type="index" :index="1" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="serial_number" label="编号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="名称">
        </el-table-column>
        <el-table-column prop="online_status" label="在线状态" align="center">
          <template v-slot="scope">
            <div>
              <el-tag v-if="scope.row.online_status===1" type="success">在线</el-tag>
              <el-tag v-else type="danger">离线</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="bind_status" label="绑定状态" align="center">
          <template v-slot="scope">
            <div>
              <el-tag v-if="scope.row.bind_status===1" type="success">已绑定</el-tag>
              <el-tag v-else type="danger">未绑定</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <!-- 作用域插槽 -->
          <template v-slot="scope">
            <el-button type="text" @click="($event) => toEdit(scope.row)">修改</el-button>

            <el-button type="text" v-if="
                  scope.row.online_status === 1 || scope.row.bind_status === 1
                " disabled>删除</el-button>
            <el-button type="text" v-else @click="($event) => toDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页按钮 -->
    <div class="page" style="text-align: right; margin-top: 15px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="params.page" :page-sizes="[2, 5, 10, 20]" :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total" hide-on-single-page>
      </el-pagination>
    </div>

    <!-- 抽屉 -->
    <el-drawer @close="toClose" size="50%" :title="this.title" :visible.sync="dialog"
      direction="rtl" custom-class="demo-drawer" ref="drawer">
      <div class="demo-drawer__content">
        <el-form ref="myForm" :model="form1" :rules="rules">
          <el-row>
            <!-- {{form1}} -->
            <el-col :span="24">
              <div class="tit">设备ID非必填,有id为修改,没有id为新增</div>
              <el-form-item prop="id" label="设备ID" :label-width="formLabelWidth">
                <el-input v-model="form1.id" autocomplete="off" placeholder="请输入设备ID"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="serial_number" label="设备编号" :label-width="formLabelWidth">
                <el-input v-model="form1.serial_number" autocomplete="off"
                  placeholder="请输入设备编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="name" label="设备名称" :label-width="formLabelWidth">
                <el-input v-model="form1.name" autocomplete="off" placeholder="请输入设备名称"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>

        <!-- 不懂 -->
        <div class="demo-drawer__footer">
          <el-button @click="($event) => (dialog = false)">取 消</el-button>
          <el-button type="primary" @click="toSave">确定</el-button>
        </div>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import { get, del, postJSON } from '@/utils/request'
export default {
    data() {
        return {
            formLabelWidth: '80px',
            dialog: false,
            title: '',
            total: 0,
            form1: {},
            form: {},
            empData: [], //:data绑定的数据必须为数组
            params: {
                page: 1,
                pageSize: 5,
            },
            //表单验证规则
            rules: {
                serial_number: [
                    { required: true, message: '请输入设备编号', trigger: 'blur' },
                    // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
                ],
                name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
            },
        }
    },
    computed: {},
    methods: {
        //提交
        toSave() {
            this.$refs['myForm'].validate(async (valid) => {
                if (valid) {
                    // alert("submit!");
                    // console.log(this.form);

                    let res = await postJSON('/device/saveOrUpdate', this.form1)
                    if (res.status === 200) {
                        this.$notify({
                            title: '成功',
                            message: '这是一条成功的提示消息',
                            type: 'success',
                        })
                        //清除表单校验
                        this.toClose()
                        //当新增到下一页面时
                        if (this.total % this.params.pageSize == 0) {
                            this.params.page++
                        }
                        //刷新页面
                        this.getEmpData()
                    } else {
                        this.$notify({
                            title: '失败',
                            message: res.message,
                            type: 'error',
                        })
                    }
                    //关闭抽屉
                    this.dialog = false
                } else {
                    // console.log("error submit!!");
                    return false
                }
            })
        },
        //关闭抽屉
        toClose() {
            //重置表单校验
            this.$refs['myForm'].resetFields()
            this.dialog = false
        },
        //录入
        toAdd() {
            //打开抽屉
            this.dialog = true
            this.title = '录入设备信息'
            this.form1 = {}
        },
        //修改
        toEdit(row) {
            // console.log(row)
            this.dialog = true
            this.title = '修改设备信息'
            this.form1 = { ...row }
            // console.log(this.form1)
            delete this.form1.bind_status
            delete this.form1.online_status
            delete this.form1.latitude
            delete this.form1.timer
            delete this.form1.longitude
            delete this.form1.insert_time
            delete this.form1.video
            delete this.form1.engineer_id
        },
        //删除
        toDelete(id) {
            // console.log(id);
            this.$confirm('此操作将删除该设备, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    //发送删除请求
                    let res = await del('/device/deleteById', { id: id }) //{id: id}的简写
                    this.$message({
                        type: 'success',
                        message: res.message,
                    })
                    //当删除的是本页面的最后一个数据时
                    if (this.total % this.params.pageSize == 1) {
                        if (this.params.page != 1) {
                            this.params.page--
                        }
                    }
                    //刷新页面
                    this.getEmpData()
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },
        //页码条数发生变化函数
        handleSizeChange(pageSize) {
            // console.log(pageSize, '条数');
            this.params.pageSize = pageSize
            //重新请求数据
            this.getEmpData()
        },

        //页面发生变化函数
        handleCurrentChange(page) {
            // console.log(page, '页码');
            this.params.page = page
            this.getEmpData()
        },
        //查询设备
        async getEmpData() {
            //搜索和分页查询同时进行
            let temp = { ...this.form, ...this.params }
            // console.log(temp);
            for (let key in temp) {
                // console.log(key, '----')
                if (!temp[key]) {
                    delete temp[key]
                }
            }
            let res = await get('/device/pageQuery', temp)
            // console.log(res);
            this.total = res.data.total
            // console.log(this.total);
            this.empData = res.data.list
            // console.log(this.empData)
        },
        //去搜索
        onSearch() {
            // 从第1页开始搜索
            this.params.page = 1
            // console.log("submit!");
            this.getEmpData()
        },
    },
    created() {
        this.getEmpData()
    },
    mounted() {},
}
</script>
<style>
.tit {
    text-align: center;
    color: #820a16;
}

.search {
    padding-top: 6px;
    text-align: right;
}

.title {
    width: 1288px;
    height: 42px;
    background-color: #f4f4f4;
    line-height: 42px;
    padding-left: 14px;
    border-left: 5px solid rgb(248, 128, 128);
}
</style>
